<template>
  <div ref="menuWrapper" class="tag-demo-wrapper">
    <div class="component-example">
      <label class="example-title">使用示例</label>
      <div class="example">
          <span :style="{'position':'relative'}" @click.stop="handleClick">点我</span>
          <context-menu
            parentRef="menuWrapper"  
            :visible.sync="showContextmenu" 
            :menuData="menus"
            :event="event"
            @handleFirstMenu="handleFirstMenu"
            @handleSecondMenu="handleSecondMenu"
        ></context-menu>
      </div>
    </div>
    <div class="component-document">
      <div class="import-property">
        <label class="prop-title">输入属性</label>
        <ul class="prop-lists">
          <li class="prop-item" v-for="(item,index) in tabProps" :key="index">
            <label class="prop-name">{{ item.name }}：</label>
            <span class="prop-desc">{{ item.desc }}</span>
          </li>
        </ul>
      </div>
      <div class="output-method">
        <label class="prop-title">输出方法</label>
        <ul class="prop-lists">
          <li class="prop-item" v-for="(item,index) in tabMethods" :key="index">
            <label class="prop-name">{{ item.name }}：</label>
            <span class="prop-desc">{{ item.desc }}</span>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>
<script>
// import ContextMenu from '@/components/diy-components/ContextMenu/ContextMenu'
export default {
  name: 'ContextMenuDemo',
  components:{
    // ContextMenu
  },
  data() {
    return {
        showContextmenu:false,
        event:new MouseEvent('null'),
        tabProps:[
            {
                name:'visible',
                desc:'是否显示 ContextMenu，支持 .sync 修饰符。类型：Array'
            },
            {
                name:'menuData',
                desc:'菜单选项。默认值：[]。类型：Array。元素格式为[{label:XXX,event:XXX,hide:false}]'
            },
            {
                name:'parentRef',
                desc:'相对定位的父节点的ref名称。'
            },
            {
                name:'event',
                desc:'触发事件'
            }
        ],
        tabMethods:[
            
        ]
    }
  },
  computed: {
    menus(){
        return [
            {
                label:'菜单一',
                event:'handleFirstMenu',
                hide:false
            },
            {
                label:'菜单二',
                event:'handleSecondMenu',
                hide:false
            }
        ]
    }
  },
  mounted() {
    
  },
  methods: {
    handleClick(e){
        this.showContextmenu = true;
        this.event = e;
    },
    handleFirstMenu(){
        console.log('菜单一');
    },
    handleSecondMenu(){
        console.log('菜单二');
    }
  },
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.tag-demo-wrapper {
  width: 100%;
  height: 100%;
  .filter-content{
    padding: 10px;
    background: #fff;
    border: 1px solid lightgray;
    .filter-item:nth-child(1){
      border: none;
    }
    .filter-item{
      border-top: 1px dotted lightgray;
    }
  }
}

</style>
